<template>
  <div class="root" v-show="showMask">
    <div v-if="showScreenshot && height > 0 && width > 0" class="screenshot">
      <div
        class="screenshotBefore"
        :style="`height:${height}px;width:${width}px;left:${x}px;top:${y}px;`"
      ></div>
    </div>
    <div
      class="touchArea"
      @mouseup="gotouchstart"
      @mousemove="gotouchmove"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMask: true,
      showScreenshot: false,
      height: 0,
      width: 0,
      x: 0,
      initx: 0,
      y: 0,
      inity: 0,
    };
  },
  props: {
    msg: String,
  },
  watch: {
    height: function value(val) {
      console.log(val);
    },
  },
  mounted() {},
  methods: {
    gotouchstart(e) {
      if (!this.showScreenshot) {
        this.initx = e.offsetX;
        this.inity = e.offsetY;
        this.x = e.offsetX;
        this.y = e.offsetY;
      } else {
        this.initx = 0;
        this.inity = 0;
        this.x = 0;
        this.y = 0;
        this.height = 0;
        this.width = 0;
      }
      this.showScreenshot = !this.showScreenshot;
    },
    //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gotouchmove(e) {
      if (this.showScreenshot) {
        let xDifference = e.offsetX - this.initx;
        let yDifference = e.offsetY - this.inity;
        this.width = Math.abs(xDifference);
        this.height = Math.abs(yDifference);
        if (!(xDifference > 0)) {
          this.x = this.initx - Math.abs(xDifference);
        }
        if (!(yDifference > 0)) {
          this.y = this.inity - Math.abs(yDifference);
        }
        // console.log('xDifference',xDifference,'yDifference',yDifference,'x',this.x,'y')

      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" >
.root {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.screenshot {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  // background-color: rgba(0, 0, 0, 0.1);

  .screenshotBefore {
    content: "";
    position: absolute;
    box-shadow: 0 0 0 999vw rgba(0, 0, 0, 0.1); /*足够大的投影*/
  }
}
.touchArea {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 10;
  //  -webkit-touch-callout:none;
  //   -webkit-user-select:none;
  //   -khtml-user-select:none;
  //   -moz-user-select:none;
  //   -ms-user-select:none;
  //   user-select:none;
}
</style>